<template>
  <div class="surchargeItem-view">

    <div>

      <div class="checkbox text-ellipsis">

        <span>附加费用</span>
      </div>


      <template>
        <el-table
          ref="multipleTable"
          :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                        'text-align':'center'
                    }"
          :cell-style="{'text-align':'center'}"
          :data="datas"
          @selection-change="handleSelectionChange"
          @select-all="selectAll"
          border
          style="width: 100%">
          <el-table-column
            v-if="type == 1 || type == 2"
            type="selection"
            :selectable="selectable"
            width="50">
          </el-table-column>
          <el-table-column
            prop="surcharge_name"
            label="附加费用名称">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="金额"
            width="100">
            <template slot-scope="scope">
              <span class="price">¥{{scope.row.amount.toFixed(2)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

  </div>
</template>

<script>
    export default {
        name: "surchargeItem",
        model:{
            prop:'selection',
            event:'change'
        },
        props:{
            datas:Array,
            method:{
                type:Number,
                default:1,
            },
            type:{
                type:Number,
                default:0,
            }
        },
        data:function () {
            return{
                tableData: [],
                checked:false,
                multipleSelection: [],
                allSelect:false,
                refundNum:0,
            }
        },
        mounted:function(){
            // for (let i = 0; i < this.data.details.length; i++){
            //     let num = this.data.details[i].number
            //     this.data.details[i].refundNum = num;
            // }
            if (this.type == 1){
                this.$refs.multipleTable.toggleAllSelection();
            }
        },
        methods:{
            handleSelectionChange:function(val) {
                this.multipleSelection = [];
                for (let i = 0; i < val.length; i++){
                    let a = {...val[i]}
                    this.multipleSelection.push(a);
                }
                // console.log(this.multipleSelection)
                this.$emit("dataChange",this.multipleSelection)
            },
            selectable:function (item) {

                return this.type == 2;
            },
            selectAll:function (val) {
                if (this.type == 1){
                    this.allSelect = !this.allSelect
                    this.$emit("dataChange",this.allSelect?this.datas:[])
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/payOrDrug/surchargeItem.scss";
</style>
